<template>
	<div :style="{ ...props.containerStyle }" :class="buffClassList">
		<slot></slot>
		<div
			:style="{ ...props.containerStyle }"
			v-if="buffsDetailList.length > 0"
			:class="['buffDetails', 'buffDetails-' + props.shape]"
		>
			<span v-for="item in buffsDetailList" :key="item.type" :class="['ellipsis', 'ellipsis-' + props.shape]">
				<a-tooltip :title="item.text">
					{{ item.text }}
				</a-tooltip>
			</span>
		</div>
	</div>
</template>

<script setup>
import {defineProps} from 'vue'

const props = defineProps(['properties', 'containerStyle', 'class', 'shape'])

const buffClassList = ref(['baseNodeContainer'])
const buffsDetailList = ref([])
watch(
	() => props.properties.buffs,
	(newValue, oldValue) => {
		processBuffs()
	},
	{deep: true}
)
onMounted(() => {
	processBuffs()
})
const processBuffs = () => {
	if (!props.properties?.buffs) {
		return
	}
	let propClass = props['class']
	buffClassList.value = propClass ? [propClass] : ['baseNodeContainer']
	buffsDetailList.value = []
	for (let o of props.properties.buffs) {
		buffClassList.value.push(o.type)
		buffClassList.value.push(o.type + '-' + (props.shape || 'rect'))

		if (o.text) {
			buffsDetailList.value.push(o)
		}
	}
}
</script>

<style scoped lang="less">
.checkError {
	border: 1px solid red !important;
}

.buffDetails {
	position: absolute;
	border: 1px solid red;
	background-color: white;
	width: 100%;
	height: 100%;
}

.buffDetails-diamond {
	transform: rotateZ(90deg) !important;
}

.stepSuccess {
	background: url('/img/success.svg') center/contain no-repeat #fff !important;
}

.stepError {
	/*border: 2px solid green;*/
	background: url('/img/error.svg') center/contain no-repeat #fff !important;
	/*background: linear-gradient(to bottom, #00ffff 0%, #e6e6e6 100%);*/
}

.stepNoExecute {
	/*border: 2px solid green;*/
	background: url('/img/emptyExecute.svg') center/contain no-repeat #fff !important;
	/*background: linear-gradient(to bottom, #00ffff 0%, #e6e6e6 100%);*/
}

.pause {
	background: linear-gradient(90deg, #feac5e, #c779d0, #4bc0c8) !important;
}


.stepRunning-rect {
	position: relative;
	padding: 1px;
	overflow: hidden;
}

.stepRunning-rect > * {
	background-color: #fff;
	position: relative;
}

.stepRunning-rect:before {
	content: '';
	animation: stepRunningRectRotate linear 1s infinite;
	background: conic-gradient(#46cc46, #fff);
	position: absolute;
	width: 1000px;
	height: 1000px;
	left: 50%;
	top: 50%;
}

@keyframes stepRunningRectRotate {
	from {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotateZ(-360deg);
	}
}


.stepRunning-diamond {
	position: relative;
	padding: 1px;
	overflow: hidden;
}

.stepRunning-diamond > * {
	background-color: #fff;
	position: relative;
}

.stepRunning-diamond:before {
	content: '';
	animation: stepRunningDiamondRotate linear 1s infinite;
	background: conic-gradient(#46cc46, #fff);
	position: absolute;
	width: 1000px;
	height: 1000px;
	left: 50%;
	top: 50%;
}

@keyframes stepRunningDiamondRotate {
	from {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotateZ(-360deg);
	}
}


.stepRunning-circular {
	position: relative;
	padding: 1px;
	overflow: hidden;
}

.stepRunning-circular > * {
	background-color: #fff;
	position: relative;
}

.stepRunning-circular:before {
	content: '';
	animation: stepRunningCircularRotate linear 1s infinite;
	background: conic-gradient(#46cc46, #fff);
	position: absolute;
	width: 100px;
	height: 100px;
	left: 50%;
	top: 50%;
}

@keyframes stepRunningCircularRotate {
	from {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotateZ(-360deg);
	}
}

//
//.stepRunning-circular {
//	position: relative;
//}
//
//.stepRunning-circular:before {
//	content: '';
//	position: absolute;
//	top: 0;
//	left: 0;
//	right: 0;
//	bottom: 0;
//	margin: 0px;
//	border-top: 1px solid #46cc46;
//	border-radius: 50%;
//	transform: rotate(45deg);
//	animation: stepRunningCircularRotate 1s linear infinite;
//}
//
//@keyframes stepRunningCircularRotate {
//	0% {
//		transform: rotate(0);
//	}
//
//	100% {
//		transform: rotate(360deg);
//	}
//}

.ellipsis {
	white-space: nowrap; /* 确保文本在一行内显示 */
	overflow: hidden; /* 隐藏溢出的内容 */
	text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}

.ellipsis-diamond {
	transform: rotateZ(225deg) !important;
}
</style>
